@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  box-sizing: border-box;
}

.header {
  @apply rounded-b-xl bg-slate-200 dark:bg-slate-500 pt-10
}

.header__wrapper {
  @apply container flex justify-center items-center flex-col mx-auto
}

.header-content {
  @apply flex gap-3 mb-10
}

.navigation__link {
  @apply text-lg md:text-xl dark:text-gray-300 dark:hover:text-gray-200 hover:text-gray-500 text-gray-900 transition-colors
}

.navigation__link_active {
  @apply dark:text-gray-100  text-gray-600
}

.content {
  @apply work header mt-10 rounded-t-xl px-5 md:px-10 rounded-b-none
}

.content p:not(.work__headline) {
  @apply work__description text-sm xl:text-base
}

.content p:not(:last-child) {
  @apply mb-3
}
.header__image {
  @apply w-10 h-10
}

.header__item {
  @apply w-fit h-fit
}

.header__link {
  @apply block w-fit h-fit hover:scale-110 transition-transform
}

.work__list {
  @apply grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 xl:grid-cols-3
}

.work {
  @apply container mx-auto py-5 md:py-20
}

.work__item {
  @apply bg-slate-200 dark:bg-slate-500 rounded-lg
}

.work__content-wrapper {
  @apply px-6 flex flex-col gap-3 py-4 justify-between
}

.work__headline {
  @apply text-2xl xl:text-3xl dark:text-gray-300
}

.work__link:not(.cursor-not-allowed) {
  @apply hover:scale-110
}

.work__link {
  @apply inline-flex gap-2 py-1 pr-2 pl-1 bg-gray-200 border-2 border-solid border-gray-400 rounded-2xl transition-transform
}

.work__technology-image {
  @apply w-10
}

.work__description {
  @apply text-xl xl:text-2xl dark:text-gray-300
}

.work__preview {
  @apply bg-no-repeat bg-top bg-cover rounded-lg h-44 sm:h-60 lg:h-72 xl:h-56
}

.work__view-list {
  @apply inline-flex gap-2
}

.work__technology-list {
  @apply inline-flex gap-2 items-center
}

.navigation {
  @apply flex gap-3 py-3
}
